<template>
  <div>

    <div style="background-color:#468aff">
      <ret-head></ret-head>
    </div>
    <div style="margin-top: 30px;background: white; box-shadow:1px 2px 3px 4px rgba(204,204,204,0.38)" class="main">
      <label style="font-family: 黑体;font-size: 25px;margin-top: 100px;margin-left: 163px">找回密码</label>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="right"  style="margin-top: 60px">
        <el-form-item label="新密码" prop="password1" style="width: 350px" >
          <el-input v-model="ruleForm.password1" placeholder="请输入新密码" type="password"  show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2" style="width: 350px">
          <el-input v-model="ruleForm.password2" placeholder="请确认密码" type="password"  show-password></el-input>
        </el-form-item>
        <el-form-item style="margin-right:100px;margin-top: 30px">
          <el-button type="primary" @click="submitForm('ruleForm')" style="width: 250px">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div  style="margin-left: 18%;margin-top: 200px" >
      <el-steps :space="300" :active="2" finish-status="success" align-center>
        <el-step title="已完成 步骤1" ></el-step>
        <el-step title="已完成 步骤2" ></el-step>
        <el-step title="进行中 步骤3" status="finish"></el-step>
      </el-steps>
    </div>
  </div>

</template>

<script>
    import RetHead from "./RetHead";

    export default {
        name: "Step3",
      components: {
        RetHead:RetHead

      },

      data() {
        return {
          ruleForm: {
            password1:'',
            password2:'',

          },
          rules: {
            password1: [
              {required: true, message: '请输入新的密码', trigger: 'blur'},
            ],
            password2: [
              {required: true, message: '请确认新的密码', trigger: 'blur'},
            ]
          }
        }
      },
      methods: {
       /* submitForm() {
          if (this.ruleForm.password1!==''
            &&this.ruleForm.  password2!=='')
          {
            if (this.ruleForm.password1===this.ruleForm.password2){
              this.$refs['ruleForm'].validate(async (valid) => {
                if (valid) {
                  const {data: res} = await this.$http.post(
                    'http://localhost:8888/updatePassword',
                    {id:this.$route.query.id,password: this.ruleForm.password1},
                    {emulateJSON:true});
                  if (res.code === 200)
                  {
                    this.$message({
                      message: res.msg,
                      type: 'success'
                    });
                    this.$router.push({path: '/UserLogin'});
                  }else {
                    this.$message({
                      message: res.msg,
                      type: 'error'
                    });
                  }
                }else {
                  return false
                }
              });}
            else
            { this.$message({
              message:"两次密码输入不一样，请重新输入",
              type:"error"
            })
            }
          }else
          {

          }
        },*/
        submitForm() {

              this.$refs['ruleForm'].validate(async (valid) => {
                if (valid) {
                  if (this.ruleForm.password1===this.ruleForm.password2){
                  const {data: res} = await this.$http.post(
                    'http://localhost:8888/update/password',
                    {id:this.$route.query.id,password: this.ruleForm.password1},
                    {emulateJSON:true});
                  if (res.code === 200)
                  {
                    this.$message({
                      message:'修改密码成功，请登录',
                      type: 'success'
                    });
                    this.$router.push({path: '/UserLogin'});
                  }else {
                    this.$message({
                      message: '修改密码失败',
                      type: 'error'
                    });
                  }
                }
                  else
                  { this.$message({
                    message:"两次密码输入不一样，请重新输入",
                    type:"error"
                  })
                  }
              }});


        },
      }
    }
</script>

<style scoped>
  .main {
    /*text-align: center;*/
    background-color: rgba(255, 255, 255, 0.07);
    /*border-radius: 20px;*/
    width: 450px;
    height: 350px;
    position: relative;
    left: 50%;
    top: 10%;
    transform: translate(-50%, 10%);
  }


</style>
